<template>
  <div class="caretOder" :class="{'Chinese':languageData.id=='Chinese'}">
    <section id="header">
     <HeaderPublc></HeaderPublc>
    </section>
    <section id="cent" :ds="add">
      <el-dialog  :visible.sync="dialogVisible" width="500px">
        <div>
          <p style="color: #000;font-size: 15px">{{ languageData.public.litsGo}}</p>
        </div>
          <div class="" style="margin-top: 40px;text-align: center">
            <el-button type="primary" size="medium"   style="width: 120px" @click="addOderPostFn()">{{ languageData.public.jx}}</el-button>
            <el-button size="medium"  @click="dialogVisible = false" style="width: 120px;"><span style="color: #000">{{ languageData.public.cancel}}</span></el-button>
          </div>
      </el-dialog>
         <div class="checkBox" style="text-align: left"> <el-checkbox  v-model="clear" @change="checkBox()">{{languageData.public.QuickCreate}}</el-checkbox> </div>
         <div class="center" >
           <!-- 表单-->
           <el-form  :model="form" :rules="languageData.id=='Chinese'?rules:rules2" ref="form"   :label-width="formConfig.labelWidth"  label-position="left" id="formBox">
             <!-- 柜号-->
             <el-form-item :label="languageData.public.plalte+' / '+languageData.public.plalteB" prop="containerId">
               <el-input v-model="form.containerId"  :placeholder="languageData.public.plalte+' / '+languageData.public.plalteB" ></el-input>
             </el-form-item>
             <!-- 提单号-->
             <el-form-item :label="languageData.public.ladingIdBill" prop="ladingId">
               <el-input type="textarea"
                         :autosize="{ minRows: 2, maxRows: 8}"
                         v-model="form.ladingId"
                         :placeholder="languageData.public.billPlaceholder"  v-on:blur="replaceChange(form.ladingId)"></el-input>
             </el-form-item>
             <!--<el-form-item :label="languageData.public.ladingIdBill" style="text-align: left">-->
               <!--<div v-for="(list,index) in form.ladingId" class="" style="position: relative;padding: 5px 0px">-->
                 <!--<div class="left indexNumber" >-->
                   <!--{{index + 1}}-->
                 <!--</div>-->
                 <!--<el-input v-model="form.ladingId[index]"  :disabled="index != form.ladingId.length-1"  :placeholder="languageData.public.ladingIdBill" @change="rulesCheck(list,index)"></el-input>-->
                 <!--<span class="el-icon-circle-close-outline inputIcon" v-show="form.ladingId.length>1" v-on:click="addOrLadingId('del',index)"></span>-->
               <!--</div>-->
               <!--<p class="err" style="color: red;font-size: 12px;line-height: 20px" v-show="errData"> {{errData}}</p>-->
               <!--<el-button type="primary" v-if="form.ladingId[form.ladingId.length-1] && !errData[form.ladingId.length-1]" :disabled="false" size="mini"  v-on:click="addOrLadingId('add')"> {{languageData.public.add}} </el-button>-->
               <!--<el-button type="primary" v-if="!form.ladingId[form.ladingId.length-1] || errData[form.ladingId.length-1]" :disabled="true" size="mini"  > {{languageData.public.add}} </el-button>-->
             <!--</el-form-item>-->
             <el-popover ref="popover" v-model="visible" placement="bottom" width="400" trigger="focus" :cityList="cityList" >
               <div class="listCity">
                 <p v-for="list in  deviceListData" v-on:click="checkDevis(list)"><span> {{list.deviceNumber}} </span></p>
               </div>
             </el-popover>
             <!-- 设备号-->
             <el-form-item :label="languageData.public.container" prop="deviceId">
               <!--<input type="text" style="color: #606266" class="popover" v-model="form.deviceId" v-popover:popover  placeholder="设备号" @change="changeDevice(form.deviceId)" />-->
               <input type="text" style="color: #606266" class="popover" v-model="form.deviceId" v-popover:popover  :placeholder="languageData.public.container"
                      @keyup="changeDevice(form.deviceId)" @change="changeDevice(form.deviceId)"   @focus="deviceListData=[]" @blur="checkdeviceId()"/>

             </el-form-item>
             <!-- 交通工具-->
             <el-form-item :label="languageData.public.modeOfTransport" prop="transportType" >
              <div class="clearfix">
                <div class="iconBox clearfix" v-for="list in transportType" >
                  <div class="left img" :class="{'check':list.check}"  v-on:click="clickType(list)">
                     <img class="imgSrc" :src="list.check? list.iconDlf:list.icon">
                  </div>
                  <span class="left">
                    <p>{{list.text}}</p>
                  </span>
                </div>
              </div>
             </el-form-item>
             <!-- 起运地-->
             <el-form-item :label="form.transportType != 3 ? languageData.public.departure:languageData.public.departurePort  " prop="start">
               <el-popover ref="popover4" v-model="visible1" placement="bottom" width="400" trigger="focus" :cityList="cityList" >
               <div class="listCity">
                <p v-for="list in  listCity" v-on:click="clickgetcity(list,1)"><span>{{list.countryCN}} </span><span>{{list.stationCN}}({{list.code}}) </span><span> {{list.stationEN}}</span> <span></span></p>
               </div>
               </el-popover>
                 <input type="text" AUTOCOMPLETE="OFF" style="color: #606266" :placeholder="form.transportType != 3 ? languageData.public.departure:languageData.public.departurePort " class="popover" v-model="form.start" v-popover:popover4  @keyup="changeFn(form.start,1)"  @change="changeFn(form.start,2)"  @focus="listCity=[]"/>
               </el-form-item>
             <!-- 目的地 目的港-->
             <el-form-item :label=" form.transportType != 3 ? languageData.public.desitnation:languageData.public.desitnationPort"  prop="end">
               <el-popover ref="popover3" v-model="visible2" placement="bottom" width="400" trigger="focus" :cityList="cityList" >
                 <div class="listCity">
                   <p v-for="list in  listCity" v-on:click="clickgetcity(list,2)"><span>{{list.countryCN}} </span><span>{{list.stationCN}}({{list.code}}) </span><span> {{list.stationEN}}</span> <span></span><span>{{list.abbreviation}} </span></p>
                 </div>
               </el-popover>
               <!--<el-input v-model="form.end"  v-popover:popover3  @keyup="changeFn(form.end,2)" @focus="listCity=[]"></el-input>-->
               <input type="text" AUTOCOMPLETE="OFF" style="color: #606266" class="popover" :placeholder="form.transportType != 3 ? languageData.public.desitnation:languageData.public.desitnationPort" v-model="form.end" v-popover:popover3   @keyup="changeFn(form.end,2)" @change="changeFn(form.end,2)"   @focus="listCity=[]"/>
             </el-form-item>


             <!-- 位置发送频率-->
             <el-form-item :label="languageData.public.frequencyGPS" prop="locateFrequency" style="text-align: left">
               <el-select :disabled="!disabled" v-model="form.locateFrequency" :placeholder="languageData.id=='Chinese'?'请选择':'time'" style="width: 50%" @change="dataNmber(form.locateFrequency,battery)">
                 <el-option v-for="item in options" :key="item.value" :label="languageData.id=='Chinese'?item.label:item.label2" :value="item.value">
                 </el-option>
               </el-select>
               <span style="margin-left:20px " v-show="languageData.id=='Chinese'">该设备还能继续使用约<span class="red" style="color: red">{{date}}</span>天</span>
               <span style="margin-left:20px " v-show="languageData.id!='Chinese'">last about  <span class="red" style="color: red">{{date}}</span>days</span>
             </el-form-item>
             <!-- 过境口岸-->
             <el-form-item v-if="form.transportType != 3" :label="languageData.public.TransitPort" >
               <el-input v-model="form.transitPort"  :placeholder="languageData.public.TransitPort"></el-input>
             </el-form-item>
             <!-- 箱型-->
             <el-form-item  :label="languageData.public.ContainerType" >
               <el-select v-model="form.cartonType" :placeholder="languageData.public.ContainerType"  style="width: 100%">
                 <el-option
                   v-for="item in cartonType"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                 </el-option>
               </el-select>
             </el-form-item>
             <!-- 集装箱归属-->
             <el-form-item v-if="form.transportType != 3" :label="languageData.public.ContainerOwner" >
               <el-select v-model="form.cartonOwner" :placeholder="languageData.public.ContainerOwner"  style="width: 100%">
                 <el-option
                   v-for="item in cartonOwner"
                   :key="item.value"
                   :label="languageData.id=='Chinese'?item.label:item.label2"
                   :value="item.value">
                 </el-option>
               </el-select>
             </el-form-item>
             <!-- 货物名称-->
             <el-form-item  :label="languageData.public.TradeName" >
               <el-input v-model="form.goodesName"  :placeholder="languageData.public.TradeName" ></el-input>
             </el-form-item>
             <!-- HS编码-->
             <el-form-item  :label="languageData.public.HSCode" >
               <el-input v-model="form.hsCode"  :placeholder="languageData.public.HSCode" ></el-input>
             </el-form-item>
             <!-- 车型-->
             <el-form-item v-if="form.transportType != 3" :label="languageData.public.VeichelType">
               <el-select v-model="form.vehicleType" :placeholder="languageData.public.VeichelType"  style="width: 100%">
                 <el-option
                   v-for="item in careStatus"
                   :key="item.value"
                   :label="languageData.id=='Chinese'?item.label:item.label2"
                   :value="item.value">
                 </el-option>
               </el-select>
             </el-form-item>
             <!-- 箱量-->
             <el-form-item :label="languageData.public.FreightClause" >
               <el-select v-model="form.serviceTerm" :placeholder="languageData.public.FreightClause"  style="width: 100%">
                 <el-option
                   v-for="item in serviceTerm"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                 </el-option>
               </el-select>
             </el-form-item>
             <!-- 服务客服名-->
             <el-form-item :label="languageData.public.Customer" >
               <el-input  v-model="form.customer" :placeholder="languageData.public.Customer" ></el-input>
             </el-form-item>
              <!--预计到达时间-->
             <el-form-item :label="languageData.public.arriveTime" >
               <div style="text-align: left">
                 <el-date-picker
                   v-model="form.estimatedArrivalTime"
                   type="date"
                   :placeholder="languageData.public.arriveTime"
                   :picker-options="pickerOptions0">
                 </el-date-picker>
               </div>

             </el-form-item>
             <el-form-item label="">
               <div style="text-align: left">
                 <el-button type="primary" round class="submit" v-on:click="submitForm('form')"> {{languageData.public.Submit}} </el-button>
               </div>
             </el-form-item>
           </el-form>
         </div>
    </section>
  </div>
</template>
<style scoped>
  .inputWidth{width: 80%}
  .indexNumber{width: 15px;height: 15px;font-size: 14px;position: absolute;left: -20px;top: 15px;line-height: 15px;text-align: center;color: #adadad}
  .checkBox{width: 850px;margin: auto;padding: 10px}
  #cent{background-color: #f5f5f7;padding-top: 70px;padding-bottom: 70px;}
  .ctiye{ height: 300px;overflow-y:scroll }
  .cityBox{ cursor: pointer;padding: 5px;font-size: 12px;}
  .cityBox:hover { border: 1px solid #e1e1e1 }
  ::-webkit-input-placeholder{
      color: #c0c4cc;
    }
  ::-moz-placeholder{
    color: #c0c4cc;
  }
  :-ms-input-placeholder{
    color: #c0c4cc;
  }
  :-moz-placeholder{
    color: #c0c4cc;
  }
  .inputIcon{position: absolute ;top: 13px;right: -50px;font-size: 16px}
   form{max-width:690px; }
  .Chinese form{min-width:555px; }
  .imgSrc{width: 25px;height: 25px;margin: auto;}
  .center{width: 850px;background-color: #fff;min-height: 400px;border: solid 1px #e1e1e1;margin:auto;padding: 43px;border-radius:10px; box-shadow:0 0 16px #e2e7ea;padding-bottom: 10px; }
  .img{width: 25px;height: 25px;background-color: #e2f3ff;padding:10px;margin:0px 10px;border-radius:30px; }
  .iconBox{width:25%;height:55px;float: left}
  .img:hover{cursor: pointer }
  .check{background-color: #0e72b9;cursor: pointer }
  .address{height:26px;margin: auto;border: 1px solid #e1e1e1;border-radius: 8px 8px 0px 0px ;padding: 7px 10px;text-align:left;line-height: 25px;position: relative}
  .addressChart{width:383px;height:26px;margin: auto;border: 1px solid #e1e1e1;border-radius: 0px 0px 8px 8px ;padding: 7px 10px;text-align:left;line-height: 25px; outline:none}
  .down{width: 40px;height: 40px;display: block; font-size: 14px;text-align: center;position: absolute;top:0px;right: 0px;line-height: 40px;cursor: pointer}
  .addressChart:focus{border:1px solid #409eff}
  .submit{ width: 130px;height: 34px;line-height: 0px;background-color: #0e72b9;margin-top:120px;}
  .submit:hover{background-color: #409eff }
  .el-form-item{margin-bottom:26px;}
  .flag{width: 20px;height: 20px;background: #e1e1e1;border-radius:10px; float: left;}
  .Country{ float: left;margin-left: 10px;}
  .cityList{padding: 3%;width:90% }
  .popover{width: 93%;height: 30px;border: 1px solid #dcdfe6;transition: border-color .2s cubic-bezier(.645,.045,.355,1);padding: 5px 15px;    border-radius: 4px}
  .popover:focus{border: 1px solid #409eff;}
  .listCity span{margin: 0px 10px}
  .listCity p{padding: 10px 0px;cursor: pointer}
  .listCity p:hover{background: #e1e1e1}
  .red{color: red;margin: 0px 10px}
  @media only screen and (min-width: 300px){
    .center{margin-left:100px;}
  }
  @media only screen and (min-width: 1200px){
    .center{margin:0px auto;}
  }
</style>
<script>
  import HeaderPublc from '../public/herder.vue'
  import IconCarNor from '../../../static/img/icon/icon_car_nor.png'
  import IconCarSel from '../../../static/img/icon/icon_car_sel.png'
  import IconPlantNor from '../../../static/img/icon/icon_plant_nor.png'
  import IconPlantSel from '../../../static/img/icon/icon_plant_sel.png'
  import IconShipNor from '../../../static/img/icon/icon_ship_nor.png'
  import IconShipSel from '../../../static/img/icon/icon_ship_sel.png'
  import IconTrainNor from '../../../static/img/icon/icon_train_nor.png'
  import IconTrainSel from '../../../static/img/icon/icon_train_sel.png'
  import jsonListData from '../../../static/stationCode'
  import PUBLE from '../../vuex/public'
  import {mapState, mapActions} from 'vuex'
  export default {
    name: 'my-oder',
    created () {
      this.$store.commit('updateDeviceList', null)
      // 查看本页面路由 绑定对应页面class
      var usr = sessionStorage.getItem('user')
      if(usr) {
        usr = JSON.parse(usr)
        this.user = usr
        this.form.companyId = usr.companyId
      }

      var parm ={
        status:1
      }
      this.getDeviceList(parm)
    },
    data () {
    var ladingIdCheck = (rule, value, callback) => {
       var regEn =/^[0-9a-zA-Z\s\n]{0,}$/;
       if(regEn.test(value)) {
         callback();
       }else {
         var text = this.languageData.id == 'English'? 'Please fill IMEI No.':"请输入设备号"
         callback(new Error(text));
       }
     };
    var deviceIdCheck = (rule, value, callback) => {
        var err = true;
        for(let i in this.deviceListData1){
          if (this.deviceListData1[i].deviceNumber == value){
            err = false;
            break
          }
        }
        console.log(err)
      if(err){
        var text = this.languageData.id == 'English'? 'Please input the correct Lading IMEI No。':"请填写正确的设备号"
        callback(new Error(text));
      }else {
        callback();
      }
      };
      return {
        last:false,
        clear:false,
        dialogVisible:false,
        oderId: null,
        visible2: false,
        visible1: false,
        visible:false,
        disabled:false,
        listCity:[],
        deviceListData:[],
        deviceListData1:[],
        battery:'',
        date:'',
        form: {
          containerId:"", // 柜号/运输号
          ladingId:"", // 提单号（可空）
          deviceId: "", // 设备号
          transportType:0, // 运输方法
          // startPosition: {country: null, city: null, address: null}, // 起运地
          // endPosition: {country: null, city: null, address: null}, // 目的地
          start: '', // 起运地
          end: '', // 目的地
          startcode: '', // 起运地
          endcode: '',
          frequencyType: 'min', // 频率类型(min/hour/day)
          locateFrequency: '', // 发送频率
          companyId: '',//公司id
          companyName:'',//货品公司名称r
          goodesName:'',//货品名称
          vehicleType:'',//车型
          cartonType:'',
          hsCode:'',
          transitPort:'',
          serviceTerm:'',
          customer:'',
          cartonOwner:'',
          estimatedArrivalTime:''// 预计到达时间
        },//
        serviceTerm:[{
          value: 'DOOR-DOOR',
          label: 'DOOR-DOOR'
        }, {
          value: 'DOOR-CFS',
          label: 'DOOR-CFS'
        }, {
          value: 'CFS-CFS',
          label: 'CFS-CFS'
        }, {
          value: 'CFS-DOOR',
          label: 'CFS-DOOR'
        }],
        careStatus: [{
          value: 1,
          label: '篷车',
          label2: 'Van'
        }, {
          value: 2,
          label: '敞车',
          label2: 'Gondola car'
        }, {
          value: 3,
          label: '罐车',
          label2: 'Tank Car'
        }, {
          value: 4,
          label: '平板车',
          label2: 'FLAT CAR'
        }],
        cartonType: [{
          value: '20GP',
          label: '20GP'
        }, {
          value: '40GP',
          label: '40GP'
        }, {
          value: '40HQ',
          label: '40HQ'
        }],
        options: [{
        value: '1 小时',
        label: '1 小时',
        label2: '1 hour'
      }, {
        value: '2 小时',
        label: '2 小时',
        label2: '2 hour'
      }, {
        value: '3 小时',
        label: '3 小时',
        label2: '3 hour'
      }, {
        value: '6 小时',
        label: '6 小时',
        label2: '6 hour'
      }, {
        value: '8 小时',
        label: '8 小时',
        label2: '8 hour'
      }, {
        value: '12 小时',
        label: '12 小时',
        label2: '12 hour'
      }, {
        value: '1天',
        label: '1天',
        label2: '1 day'
      }],
        transportType: [
          {iconDlf: IconTrainSel, icon: IconTrainNor, text: '火车', check: true, id: 0},
          {iconDlf: IconCarSel, icon: IconCarNor, text: '汽车', check: false, id: 1},
         {iconDlf: IconShipSel, icon: IconShipNor, text: '轮船', check: false, id: 3},
         // {iconDlf: IconPlantSel, icon: IconPlantNor, text: '飞机', check: false, id: 2}
        ],
        ctiye: null,
        list: ['1_41_18', '1_41_12', '1_41_7', 'BEL_#_WBR', 'BEL_#_WLX', 'NZL_#_NSH', '1_61_9'],
        rulText:{
          containerId: '请输入柜号/车牌号',
          deviceId: '请输入设备号',
          transportType: '请选择运输方式',
          startPosition: '填写起运地',
          endPosition: '填写目的地',
          locateFrequency: '请选择发送频率',
        },
        rules: {
          containerId: [
            {  validator:(rule, value, callback) =>{ var regEn =/^[0-9a-zA-Z#%]{0,}$/ ;if(regEn.test(value)){callback(); }else {callback(new Error('请输入正确的 柜号/车牌号')); }}, trigger: 'blur' }
          ],
          ladingId: [
            { validator:ladingIdCheck, trigger: 'blur' }
          ],
          deviceId: [
            { required: true, message: '请输入设备号', trigger: 'blur' },
            { validator:deviceIdCheck, trigger: 'blur' }
          ],
          transportType: [
            { type: 'number', required: true, message: '请选择运输方式', trigger: 'change' }
          ],
          start: [
            { required: true, message: '填写起运地', trigger: 'blur' }
          ],
          end: [
            { required: true, message:'填写目的地', trigger: 'blur' }
          ],
          locateFrequency: [
            { required: true, message:'请选择发送频率', trigger: 'change' }
          ]
        },
        rules2: {
          containerId: [
            {  validator:(rule, value, callback) =>{
              var regEn =/^[0-9a-zA-Z#%]{0,}$/ ;
              if(regEn.test(value)){callback();
                }else {
                  callback(new Error('\'Please input the correct Lading Container No./Plate No.'));
                }
              },
              trigger: 'blur' }
          ],
          ladingId: [
            { validator:ladingIdCheck, trigger: 'blur' }
          ],
          deviceId: [
            { required: true, message: 'Please fill IMEI No.', trigger: 'blur' },
            { validator:deviceIdCheck, trigger: 'blur' }
          ],
          transportType: [
            { type: 'number', required: true, message: 'Please choose mode of transport', trigger: 'change' }
          ],
          'start': [
            { required: true, message: 'Please fill the departure address', trigger: 'blur' }
          ],
          'end': [
            { required: true, message:'Please fill the destination address', trigger: 'blur' }
          ],
          locateFrequency: [
            { required: true, message:'Please choose the GPS frequence', trigger: 'change' }
          ]
        },
        formConfig: {
          labelWidth: '150px'
        },
        cityText: {
          EN: null,
          CN: null,
          bol: true
        },
        cityTextEnd: {
          EN: null,
          CN: null,
          bol: true
        },
        countryData: [{
          country: {
            id: null,
            CN: null,
            EN: null,
            province: [{
              id: null,
              CN: null,
              EN: null,
              city: [{
                id: null,
                CN: null,
                EN: null
              }]
            }]
          }
        }],
        errData:'',
        cartonOwner: [{
          value: 2,
          label: '租箱',
          label2: 'Buy',
        },{
          value: 3,
          label: '买箱',
          label2: 'Rent',
        },{
          value: 1,
          label: '铁路箱',
          label2: 'Railway Container',
        }],
        len:'',
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
      }
    },
    methods: {
      ...mapActions({
        addOderPost: 'addOderPost',
        getDeviceList: 'findDeviceList',
        getCityList: 'getCityList'
      }),
      checkBox(){
        if(this.clear == this.last){
          this.clear = !this.clear
        }
        this.last =  this.clear
      },
      // 验证设备号
      checkdeviceId(){
        this.form.deviceId =  this.form.deviceId.replace(/\s/ig,'')
        var err = true,value=this.form.deviceId;
        if(this.form.deviceId.length<15){
          return
        }
        for(let i in this.deviceListData1){
          console.log(value,this.deviceListData1[i].deviceNumber)
          if (this.deviceListData1[i].deviceNumber == value){
            err = false;
            this.disabled = true
            break
          }
        }
        console.log(err)
        if(err){
          var text = this.languageData.id == 'English'? 'Please input the correct Lading IMEI No。':"请填写正确的设备号"
          this.openError(text);
        }
      },
      // 验证提单号
      rulesCheck(str,index){
        var regEn =/^[0-9a-zA-Z#%]{0,}$/
        this.errData = ''
        if(regEn.test(str)) {
          this.errData = ''
          return this.errData
        }else {
          this.errData = '提单号不正确'
          return this.errData = '提单号不正确'
        }
      },
      // 填写提单号
      replaceChange(str){
        str =  this.replace(str)
        this.form.ladingId = str
       // var list =
      },
      // 替换逗号
      replace(str){
        str = str.replace(/\s/ig,'')
        // str = str.replace(/ /ig,'\n')
        // str = str.replace(/\s/ig,'\n')
        // var list = str.split(',')
        // str = str.replace(/(\d+),(\d+),/g,"$1,$2\n");
        // str = str.replace(/(\d+),(\d+),/g,"$1,$2\n");
        console.log(str,'str')
        return str
      },
//添加提单号
      addOrLadingId (type,index) {
        if(type=='add'){
          this.form.ladingId.push('')
        }else {
          this.form.ladingId.splice(index,1)
        }

      },

      //
      changeFn (text,a) {
        var dat = PUBLE.publicLo.getCity(text)
        this.listCity = dat;
        if(a==1){
          this.form.startcode =  ''
        }

        if(a==2){

          this.form.endcode =  ''
        }
      },
      checkDevis(list,a){
        // str = str.replace(/\s/ig,'\n')
        this.disabled= true;
        this.form.deviceId = list.deviceNumber;
        this.battery= list.battery;
        this.dataNmber(this.form.locateFrequency,this.battery)
      },
      //
      clickgetcity(text,a){
        if (a==1){
          this.form.start = text.countryCN+' -- '+ text.cityCN+ ' -- '+text.stationCN+'('+text.code+') -- '+text.stationEN
          this.form.startcode = text.id;
        }
        if (a==2){
          this.form.end = text.countryCN+' -- '+ text.cityCN+  ' -- '+text.stationCN+'('+text.code+') -- '+text.stationEN
          this.form.endcode = text.id;
        }

      },
      // 提交订单
      submitForm (formName,a) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.errData){
              this.openError('提单号格式不正确')
              return
            }
            if(!this.form.startcode){
            this.openError(this.languageData.public.DepartureNnLL)
              return
            }
            if(!this.form.endcode){
              this.openError(this.languageData.public.DestinationNull)
              return
            }
            this.dialogVisible = true
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      addOderPostFn(a){

        this.dialogVisible = false
        var parm ={
          deviceId: this.form.deviceId, // 设备号
          transportType: this.form.transportType, // 运输方法
          startPosition: this.form.startcode+'', // 起运地
          endPosition: this.form.endcode+'', // 目的地
          frequencyType: this.form.frequencyType, // 频率类型(min/hour/day)
          locateFrequency: this.form.locateFrequency, // 发送频率
          estimatedArrivalTime:this.form.estimatedArrivalTime
        }
        if (parm.locateFrequency.indexOf('分钟') > 0) {
          parm.frequencyType = 'min'
        }
        if (parm.locateFrequency.indexOf('小时') > 0) {
          parm.frequencyType = 'hour'
        }
        if (parm.locateFrequency.indexOf('天') > 0) {
          parm.frequencyType = 'day'
        }
        if (this.form.goodesName) {
          parm.goodsName=this.form.goodesName;//货品名称
        }
        if (this.form.vehicleType && parm.transportType !=3) {
          parm.vehicleType=this.form.vehicleType;//车型
        }
        if (this.form.cartonType) {
          parm.cartonType=this.form.cartonType;//货品名称
        }
        if (this.form.hsCode) {
          parm.hsCode=this.form.hsCode;//货品名称
        }
        if (this.form.transitPort  && parm.transportType !=3) {
          parm.transitPort=this.form.transitPort;//过境口岸
        }
        if (this.form.serviceTerm) {
          parm.serviceTerm=this.form.serviceTerm;//服务协议
        }
        if (this.form.customer) {
          parm.customer=this.form.customer;//货品名称
        }
        if (this.form.cartonOwner && parm.transportType !=3) {
          parm.cartonOwner=this.form.cartonOwner;//集装箱归属
        }
        if (this.form.containerId) {
          parm.containerId=this.form.containerId;//货品名称
        }
        if (this.form.ladingId) {
         var  str  = this.form.ladingId
            str = str.replace(/\n/ig,',')
          if(str[str.length-1]==','){
            parm.ladingId = ','+ str
          }else {
            parm.ladingId = ','+ str +','
          }
        }
        if(parm.estimatedArrivalTime){
          parm.estimatedArrivalTime = PUBLE.publicLo.dataChange( parm.estimatedArrivalTime ).time + 86399999
        }
        console.log(parm,'parm' )
        this.addOderPost(parm)
      },
      // 添加成功 vuex 返回
      addFn (res) {
        if(res.body.status == '20033'){
          var text = this.languageData.id == 'Chinese'?'提单号已存在':' The lading Bill No. already exists.'
          this.openError( res.body.message + text);
          // 清空 vuex 中的本次记录，以免被下次操作状态造成混淆
          this.$store.commit('addOder', null)
          return
        }
        res = res .body
        var text = ''
        if (res.status == 0 ){
          var parm ={
            status:1
          }
          this.getDeviceList(parm)

          this.$store.commit('addOder', null)
          text = '新建运单成功'
         // this.$router.push({ name: 'chart' })
          if(this.clear){
            this.form.containerId = "";
            this.form.ladingId = '';
            this.form.deviceId = "";
          }else {
            this.form={
                containerId: null, // 柜号/运输号
                ladingId: '', // 提单号（可空）
                deviceId: null, // 设备号
                transportType: 0, // 运输方法
                // startPosition: {country: null, city: null, address: null}, // 起运地
                // endPosition: {country: null, city: null, address: null}, // 目的地
                start: '', // 起运地
                end: '', // 目的地
                startcode: '', // 起运地
                endcode: '',
                frequencyType: 'min', // 频率类型(min/hour/day)
                locateFrequency: '', // 发送频率
                companyId: '',//公司id
                companyName:'',//货品公司名称r
                goodesName:'',//货品名称
                vehicleType:'',//车型
                cartonType:'',
                hsCode:'',
                transitPort:'',
                serviceTerm:'',
                customer:'',
                cartonOwner:'',
                estimatedArrivalTime:''
          }
          }
          this.openSuccess(text)
        }
        if (res.status != 0 ){
         text = this.languageData.from.error.delOderE
          if (res.status == 50001) {
            text = this.languageData.from.error.containerId
          }
          if (res.status == 4) {
            text = this.languageData.from.error.deviceId
          }
          if(res.status == 10007){
            text = this.languageData.from.error.deviceIdUse
          }
          if(res.status == 1){
            text = 'error'
          }
          if (res.status == 40004) {
            text = this.languageData.from.error.deviceId
         }
         if(res.status == 1001){
           text = '请求异常'
         }
        // 修改成功 修改失败
        this.openError(text)
      }
        // 清空 vuex 中的本次记录，以免被下次操作状态造成混淆
        this.$store.commit('addOder', null)
      },
      // 选择运输方式
      clickType (list) {
        // 赋值运输方式
        for (let i in this.transportType) {
          this.transportType[i].check = false
        }
        list.check = true
        this.form.transportType = list.id
      },
      // c查询按钮
      updateDate (data) {
        for (let i in this.transportType) {
          switch (this.transportType[i].id) {
            case 0:
              this.transportType[i].text = data.public.train
              break
            case 1:
              this.transportType[i].text = data.public.motor
              break
            case 2:
              this.transportType[i].text = data.public.Flight
              break
            case 3:
              this.transportType[i].text =  data.public.freighter
              break
          }
        }
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message.error(text)
      },
      // 支持城市数据解析
      cityListFn (res) {
        res = res.data
        var cityData = []
        for (let i in res) {
          // 拉取本地地址世界地址jsom
          var DATA = jsonListData
          // 申明单次循环地址
          var address = {
            country: {CN: '', id: '', EN: ''},
            province: {CN: '', id: '', EN: ''},
            city: {CN: '', id: '', EN: ''}
          }
          // 切割地址 分离国家城市
          var list = res[i].split('_')
          // 注入国家id
          address.country.id = list[0]
          address.country.CN = DATA[address.country.id].CN
          address.country.EN = DATA[address.country.id].EN
          if (list) {
            // 注入省份id
            address.province.id = address.country.id + '_' + list[1]
            address.province.CN = DATA[address.country.id][address.province.id].CN
            address.province.EN = DATA[address.country.id][address.province.id].EN
            // 注入城市id
            address.city.id = address.province.id + '_' + list[2]
            address.city.CN = DATA[address.country.id][address.province.id][address.city.id].CN
            address.city.EN = DATA[address.country.id][address.province.id][address.city.id].EN
          }
          cityData.push(address)
        }
        // 国家去重
        var result = [], result2 = [], hash = {};
        // 提出所有国家 和 重复的国家
        for (var i = 0; i < cityData.length; i++) {
          var elem = cityData[i].country.id
          if (!hash[elem]) {
            result.push({
              country: {
                id: cityData[i].country.id,
                CN: cityData[i].country.CN,
                EN: cityData[i].country.EN,
                province: [{
                  id: cityData[i].province.id,
                  CN: cityData[i].province.CN,
                  EN: cityData[i].province.EN,
                  city: [{
                    id: cityData[i].city.id,
                    CN: cityData[i].city.CN,
                    EN: cityData[i].city.EN
                  }]
                }]
              }
            })
            hash[elem] = true
          } else {
            result2.push({
              pid: cityData[i].country.id,
              id: cityData[i].province.id,
              CN: cityData[i].province.CN,
              EN: cityData[i].province.EN,
              city: [{
                id: cityData[i].city.id,
                CN: cityData[i].city.CN,
                EN: cityData[i].city.EN
              }]})
          }
        }
        // 组装 城市列表
        for (let i in result2) {
          for (let k in result) {
            var bol1 = true
            if (result2[i].pid == result[k].country.id){
               for (let s in result[k].country.province){
                if (result2[i].id == result[k].country.province[s].id){
                  var da = result[k].country.province[s].city
                  var da2 = result2[i].city
                  var dat3 = da.concat(da2)
                  bol1 = false
                  result[k].country.province[s].city = dat3
                }
               }
              if (bol1) {
                result[k].country.province.push(result2[i])
              }
            }
          }
        }
        this.countryData = result
      },
      // 选择城市
      clickCity (a, list, EN, CN, en, cn, country) {
        if(list.id == this.form.startPosition.city && a==2){

           this.openError('不能和起运地相同')
         return
        }
        if(list.id == this.form.endPosition.city && a==1){

          this.openError('不能和目的地相同')
        return
        }
        if (a==1) {
          this.cityText = {
            EN: EN + '/' + list.EN,
            CN: CN + '/' + list.CN
          }
          if (en && cn) {
            this.cityText = {
              EN: EN + '/' + en + '/' + list.EN,
              CN: CN + '/' + cn + '/' + list.CN
            }
          }
          this.form.startPosition.address = ''
          this.form.startPosition.country = country
          this.form.startPosition.city = list.id
          this.cityText.bol = false
          this.visible1 = false
        }
        if (a == 2) {
          this.cityTextEnd = {
            EN: EN + '/' + list.EN,
            CN: CN + '/' + list.CN
          }
          if (en) {
            this.cityTextEnd = {
              EN: EN + '/' + en + '/' + list.EN,
              CN: CN + '/' + cn + '/' + list.CN
            }
          }
          this.form.endPosition.address = ''
          this.form.endPosition.country = country
          this.form.endPosition.city = list.id
          this.cityTextEnd.bol = false
          this.visible2 = false
        }
      },
      // 解析设备列表
      deviceListFn(res){
        res = res.body.data
        var reult = []
        for (let i in res){
          var dat = {
            deviceNumber:res[i].deviceNumber,
            battery:res[i].battery
          }
          reult.push(dat)
        }
        this.deviceListData = reult
        this.deviceListData1 = reult
      },
      //
      changeDevice(str){
        var  reult = []
        str = str.replace(/\s/ig,'')
        for(let i in this.deviceListData1){
          if(this.deviceListData1[i].deviceNumber.indexOf(str) != -1 ){
            reult.push(this.deviceListData1[i])
          }
        }
        this.deviceListData = reult;
        var boll = false;
        if(str.length == 15 && this.deviceListData.length>0){
          this.checkDevis(this.deviceListData[0],1)
        }else {
          this.disabled = false
        }
      },
      // 计算天数
      dataNmber(){
        var number = this.form.locateFrequency
        var battery = this.battery
        if(!number || !battery){
          this.date = 0
        }else {
          var da
          if(battery){
            da = 1500*(battery/100);
          }
          var data = ''
          if (number.indexOf('小时') > 0) {
            data= da / (24/ parseInt(number))
          }
          if (number.indexOf('天') > 0) {
            data =  da / parseInt(number)
          }
          this.date = parseInt(data)
        }

      }
    },
    computed: {
      // 查询条件
      add: function () {
        var parm = this.addOderData
        if (parm) {
          this.addFn(parm)
        }
        return parm
      },
      languageData: function () {
        var parm = this.language
        if (parm) {
          if (parm.check == 'Chinese') {
            parm = parm.Chinese
          }
          if (parm.check == 'English') {
            parm = parm.English
            this.formConfig.labelWidth = '200px'
//            dom.style = 'width:620px'
          }
          // 替换 其他交互数据
          this.updateDate(parm)
         // this.rulText = parm.from
        }
        return parm
      },
      cityList: function () {
        var parm = this.DeviceList
        if (parm) {
          this.deviceListFn(parm)
        }
        return 1
      },
      ...mapState([
        'addOderData',
        'language',
        'DeviceList'
      ])
    },
    mounted () {
      // 匹配英文样式
      if (this.languageData.id == 'English') {
//        var dom = document.getElementById('formBox'),
//        dom2 = document.getElementsByClassName('addressChart')
//        dom.style = 'width:692px;'
//        dom2[0].style = 'width :470px;'
//        dom2[1].style = 'width :470px;'
      }
      // 配置顶部菜单
      // var par = {
      //   company: this.user.companyName
      // }
      // this.getCityList(par)
//      par = this.list
//      this.cityListFn(par)
    },
    components: {
      HeaderPublc
    }
  }
</script>

